<template>
  <div>
    <div class="ddisp jz wh_7" style="min-width: 1200px">
      <div class="topdq" style="width: calc(100% - 300px);">
        <div class="wh_9 jz vh_max pad_15_0">
          <div class="blue_jb pad_10_0" v-if="$store.state.daohang">
            <span class="mag_l-10 xsgb" @click="pageTo(item)" v-for="(item,index) in daohang" :key="index">{{ item.tit }} > </span>
          </div>
          <div class="pad_20_0" v-if="list">
            <div class="fz_30" v-if="list.title">{{list.title}}</div>
            <div class="pad_10_0 bor_b_hui" style="color: #333333">
              <span>来源: <span class="mag_l-10" v-if="list.name">{{list.name}}</span></span>
              <span class="mag_l-30">作者: <span class="mag_l-10" v-if="list.author">{{list.author}}</span></span>
              <span class="mag_l-30">时间: <span class="centerdq mag_l-10" v-if="list.createtime">{{list.createtime | date}}</span></span>
            </div>
            <div class="tab_con">
              <div v-html="list.content" v-if="list.content" class="pad_20_0 wh_max">
              </div>
            </div>
          </div>
          <div class="wz_jz">
            <span @click="add(1)" class="pad_15_20 bor_10 wz_white xsgb" style="background-color: #3890f4">返回上一页</span>
            <span @click="add(2)" class="pad_15_20 bor_10 wz_white xsgb mag_l-30" style="background-color: #3890f4">返回上一页</span>
          </div>
        </div>
      </div>
      <div class="topdq" style="width: 300px">
        <div class="topdq">
<!--          服务中心-->
          <div class="wh_9 jz" style="font-size: 16px">
            <div class="wz_jz xd pad_15_0">
              <img class="" src="../../assets/img/jgjj_bg.png" height="9"/>
              <span class="jd jdjz fz_20 em" style="color: #054a98">服务中心</span>
            </div>
            <div class="xyy xd btn-3" @mousemove="istabHover(1)" @mouseout="istabHover(999)">
              <a href=""><i class="mag_r-20" :class="istabHover3==1?'icon-bm1':'icon-bm'"></i>中职学校网上报名系统</a>
            </div>
            <div class="xyy xd btn-3" @mousemove="istabHover(2)" @mouseout="istabHover(999)">
              <a href=""><i :class="istabHover3==2?'icon-gj1':'icon-gj'"></i>会员学校发稿统计查询</a>
            </div>
            <div class="xyy xd btn-3" @mousemove="istabHover(3)" @mouseout="istabHover(999)">
              <a href=""><i :class="istabHover3==3?'icon-nj1':'icon-nj'"></i>广西职业院校年鉴查询</a>
            </div>
          </div>

          <div class="hh wz_jz fz_13 ddd">
            <div class="split-2 mag_t-20 pad_10_0 wz_jz">
              <div class="wh_9 jz xyy" @mousemove="isHover(1)"  @mouseout="isHover(999)">
                <div class="spjz_flex pad_10_0"><i :class="isHover4==1?'zzbg-icon1':'zzbg-icon'"></i></div>
                <div class="pad_10_0">中职教育质量年度报告</div>
              </div>
            </div>
            <div class="split-2 mag_t-20 pad_10_0 wz_jz">
              <div class="wh_9 jz xyy"  @mousemove="isHover(2)"  @mouseout="isHover(999)">
                <div class="spjz_flex pad_10_0"><i class="gzbg-icon" :class="isHover4==2?'gzbg-icon1':'gzbg-icon'"></i></div>
                <div class="pad_10_0">中职教育质量年度报告</div>
              </div>
            </div>
            <div class="split-2 mag_t-20 pad_10_0 wz_jz">
              <div class="wh_9 jz xyy"  @mousemove="isHover(3)" @mouseout="isHover(999)">
                <div class="spjz_flex pad_10_0"><i class="jnds-icon" :class="isHover4==3?'jnds-icon1':'jnds-icon'"></i></div>
                <div class="pad_10_0">中职教育质量年度报告</div>
              </div>
            </div>
            <div class="split-2 mag_t-20 pad_10_0 wz_jz">
              <div class="wh_9 jz xyy"  @mousemove="isHover(4)"  @mouseout="isHover(999)">
                <div class="spjz_flex pad_10_0"><i class="wmfc-icon" :class="isHover4==4?'wmfc-icon1':'wmfc-icon'"></i></div>
                <div class="pad_10_0">中职教育质量年度报告</div>
              </div>
            </div>
          </div>
<!--          近期发布-->
          <div>
            <div class="ddisp">
              <div class="fz_22 pad_10_0 boxs" style="padding: 10px 0 10px 0"><a><span style="color: #333;">近期发布</span></a></div>
              <div class="gd wz_rigdq xsgb">
                <a href=""><span class="mag_r-5 wz_black"></span></a>
                <span class="centerdq"><img style="margin-right: 10px" src="../../assets/img/mores.png" height="15" width="15"/></span>
              </div>
            </div>
            <div>

              <div class="pad_10_0 xsgb" v-for="(item,index) in xinwen" :key="index">
                <div class="ddisp" v-if="index<10">
                  <div :class="
                  index==0?'ba1':''||
                  index==1?'ba2':''||
                  index==2?'ba3':''||
                  index==3?'ba4':''||
                  index==4?'ba5':''||
                  index==5?'ba6':''||
                  index==6?'ba7':''||
                  index==7?'ba8':''||
                  index==8?'ba9':''||
                  index==9?'ba10':''
                  " class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;"><span>{{ index+1 }}</span></div>
                  <div class="centerdq" style="width: calc(100% - 50px)">
                    <div  class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ item.title }}</div>
                  </div>
                </div>
              </div>

<!--              <div class="ddisp pad_10_0 xsgb">-->
<!--                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f79690"><span>2</span></div>-->
<!--                <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                  <div  v-if="xinwen[1]" class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[1].title }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="ddisp pad_10_0 xsgb">-->
<!--                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #f9beba"><span>3</span></div>-->
<!--                <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                  <div  v-if="xinwen[2]" class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[2].title }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="ddisp pad_10_0 xsgb">-->
<!--                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #0263c4"><span>4</span></div>-->
<!--                <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                  <div  v-if="xinwen[3]" class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[3].title }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="ddisp pad_10_0 xsgb">-->
<!--                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#3582d0 "><span>5</span></div>-->
<!--                <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                  <div  v-if="xinwen[4]" class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[4].title }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="ddisp pad_10_0 xsgb">-->
<!--                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #7fb1e2"><span>6</span></div>-->
<!--                <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                  <div  v-if="xinwen[5]" class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[5].title }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="ddisp pad_10_0 xsgb">-->
<!--                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #4ac4f6"><span>7</span></div>-->
<!--                <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                  <div  v-if="xinwen[6]" class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[6].title }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="ddisp pad_10_0 xsgb">-->
<!--                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#92dbfb"><span>8</span></div>-->
<!--                <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                  <div  v-if="xinwen[7]" class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[7].title }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="ddisp pad_10_0 xsgb">-->
<!--                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color: #b7e7fd"><span>9</span></div>-->
<!--                <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                  <div  v-if="xinwen[8]" class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[8].title }}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="ddisp pad_10_0 xsgb">-->
<!--                <div class="centerdq wz_jz em wz_white" style="width: 30px;height: 30px;line-height: 30px;background-color:#b5e8fd "><span>10</span></div>-->
<!--                <div class="centerdq" style="width: calc(100% - 50px)">-->
<!--                  <div  v-if="xinwen[9]" class="ccsl_1 hh mag_l-10" style="height: 20px;">{{ xinwen[9].title }}</div>-->
<!--                </div>-->
<!--              </div>-->

            </div>
          </div>

          <div class="img_100 img_20 mag_tb_20">
            <a v-if="gglist" class="xsgb" v-for="(item,index) in gglist" :key="index">
              <img class="pad_5_0" :src="$store.state.imageUrltitle+item.image"/>
            </a>
          </div>

<!--          融媒体矩阵-->
          <div>
            <div class="wz_jz xd pad_15_0">
              <img class="" src="../../assets/img/jgjj_bg.png" height="9"/>
              <span class="jd wz_black jdjz fz_20 em" style="color: #054a98">融媒体矩阵</span>
            </div>
            <div class="fz_12">
              <div v-for="(item,index) in rongmeitiList" :key="index" class="split3 img_100 wz_jz mag_t-10 topdq">
                <div class="wh_8 jz">
                  <div><img :src="$store.state.imageUrltitle+item.image" alt=""></div>
                  <div><span>{{ item.title }}</span></div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
let timer;
import {getArticle, getplayidApi, getremenVideoApi} from "@/api/api.js";
export default {
  data() {
    return {
      // 鼠标移入状态3
      istabHover3:0,
      // 鼠标移入状态4
      isHover4:0,
      daohang: JSON.parse(this.$route.query.titlist),
      listid: this.$route.query.listid,
      list:[],
      xinwen:[],
      rongmeitiList:[],
      gglist:[]
    };
  },
  mounted() {
    // 调用传递过来的id查询数据
    this.uploadBackCall()
    // 调用查询新闻数据
    this.remenxinwen(388)
    // 融媒体矩阵
    this.rongmeiti(402)
    // 融媒体矩阵
    this.gg(404)
  },
  created() {
  },
  destroyed() {
  },
  methods: {
  remenxinwen(e){
    let params = {
      cid:e
    };
    getremenVideoApi(params).then(res => {
      if (res.status==200) {
        this.xinwen=res.data
      } else {
        console.log(res.msg)
      }
    });
  },
    gg(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.ggList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    // 融媒体
    rongmeiti(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.rongmeitiList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    pageTo(e){
      this.$router.push(e.path)
    },
    // 调用传递过来的id查询数据
     uploadBackCall() {
       let params = {
            aid:this.listid
       };
       getplayidApi(params).then(res => {
         if (res.status==200) {
           this.list=res.data
           console.log('this.list',this.list)
         } else {
           console.log(res.msg)
         }
       });
    },
    add(e){
       if (e==1){
         this.$router.back()
       }
    },
    isHover(e){
      this.isHover4=e
    },
    istabHover(e){
      this.istabHover3=e
    },
  }
};
</script>

<style scoped>
.img_20 img{
  padding: 10px 0;
}
#wrap {
  /*margin: 20px auto;*/
  white-space: nowrap;
  overflow: hidden;
  /*padding: 10px;*/
}
#wrap div {
  display: inline-block;
}
a{
  text-decoration:none;
}
.white_a{
  color: white;
}
a:link{color: white}
a:visited{color: white}
a:hover{color: white}
a:active{color: white}
.ulli li{
  list-style: none;
  display: inline-block;
  margin-left: 160px;
}
* {
  margin: 0;
  padding: 0;
}
.add span{
  color: black;
}
.uuu li{
  list-style: none;
  padding: 10px 0 0 0;
}
.uuu span:hover{
  color: #4363c9;
}
.xf>div{
  height: 25%;
  display: flex;
  justify-content:center;
  align-items: center;
}
.gd{
  width: calc(100% - 100px);
  background: url("../../assets/img/xiexian.png");
}
.baxx{
  background: url("../../assets/img/xiexian.png");
}
.wz_hei{
  color: #333333;
}
.wz_redbig{
  color: #cc0001 !important;
  font-size: 22px;
}
.titColor{
  color: #cc0001;
}
.titColor:hover{
  color: #255B9E;
}


.ulp li{
  list-style: none;
  display: inline-block;
  padding: 10px 0;
}
.tab_b{
  border-bottom: 1px dashed #efefef;
}
.bor_b-5{
  border-radius: 0 0 5px 5px ;
}
.yrba{
  background-color: rgba(0, 0, 0, .4);
}
.sp_3 div{
  width: 33%;
  display:inline-block;
}
.tab_tb{
  border-top: 2px solid #0069df;
  border-bottom: 2px solid #0069df;
  box-sizing: border-box;
  color: #0069df;
  cursor: pointer;
  padding: 5px 0;
}
.sppad_l{
  margin-left: 20px;
  transition: 0.5s;
  color: #006ee1;
}

.btn-3 a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  line-height: 56px;
  color: rgb(51, 51, 51);
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
  background-color: #fff;
  margin-top: 11px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  z-index: 0;
  position: relative;
  padding-left: 30px;
  transition: 0.3s linear;
  font-size: 16px;
}

.btn-3 a::after {
  width: 0;
  cursor: pointer;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(360deg, #3991F5 0%, #3067E3 100%);
  transition: 0.3s linear;
}

.btn-3 a::before {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  background: linear-gradient(90deg, #3067E3 0%, #3991F5 100%);
  left: -97%;
  top: 0;
  z-index: -1;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -ms-transition: all .3s;
}
.ddd > div > div:hover{
  background: linear-gradient(90deg, #3067E3 0%, #3991F5 100%);
  color: white;
}
.btn-3 a:hover {
  color: white;
  text-decoration: none;
}

.btn-3 a:hover:after {
  width: 380px;
}

.btn-3 a span {
  vertical-align: middle;
}
.icon-bm {
  display: block;
  width: 32px;
  height: 28px;
  /*margin-right: 20px;*/
  background: url(../../assets/img/bm-img.png) no-repeat center center;
}
.icon-bm1 {
  display: block;
  width: 32px;
  height: 28px;
  /*margin-right: 20px;*/
  background: url(../../assets/img/bm-img1.png) no-repeat center center;
}
.icon-nj {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  margin-right: 20px;
  background: url(../../assets/img/icon-nj.png) no-repeat center center;
}
.icon-nj1 {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  margin-right: 20px;
  background: url(../../assets/img/icon-nj1.png) no-repeat center center;
}
.icon-gj {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  margin-right: 20px;
  background: url(../../assets/img/icon-gj.png) no-repeat center center;
}
.icon-gj1 {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  margin-right: 20px;
  background: url(../../assets/img/icon-gj1.png) no-repeat center center;
}

.zzbg-icon {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  background: url(../../assets/img/zzbg.png) no-repeat center center;
}
.zzbg-icon1 {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  background: url(../../assets/img/zzbg-img1.png) no-repeat center center;
}

.gzbg-icon {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  background: url(../../assets/img/gzbg.png) no-repeat center center;
}

.gzbg-icon1 {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  background: url(../../assets/img/gzbg-img1.png) no-repeat center center;
}

.jnds-icon {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  background: url(../../assets/img/jnds.png) no-repeat center center;
}
.jnds-icon1 {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  background: url(../../assets/img/jnds-img1.png) no-repeat center center;
}
.wmfc-icon {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  background: url(../../assets/img/wmfc.png) no-repeat center center;
}
.wmfc-icon1 {
  font-size: 16px;
  vertical-align:middle;
  display: block;
  width: 32px;
  height: 28px;
  background: url(../../assets/img/wmfc-img1.png) no-repeat center center;
}
img{
  max-width: 100% !important;
  height: auto !important;
}
</style>
<style>
.tab_con img{
  width: 100%!important;
}
</style>